{% extends 'base.html' %}
{% load static %}

{% block title %}欢迎来到花店订单系统{% endblock %}

{% block content %}
<div class="container">
    <!-- 欢迎横幅 -->
    <div class="welcome-banner rounded-3">
        <div class="container-fluid py-5">
            <h1 class="display-5 fw-bold text-white">欢迎来到XX花店</h1>
            <p class="col-md-8 fs-4 text-white">为您提供最新鲜美丽的花卉，让生活充满芬芳。</p>
            <a class="btn btn-light btn-lg" href="{% url 'products:product_list' %}">浏览全部商品</a>
        </div>
    </div>

    <!-- 精选商品 -->
    <h2 class="mb-4">精选商品</h2>
    <div class="row row-cols-1 row-cols-md-3 g-4">
        {% for product in products %}
            <div class="col">
                <div class="card h-100">
                    {% if product.image %}
                        <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}">
                    {% else %}
                        <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="默认图片">
                    {% endif %}
                    <div class="card-body">
                        <h5 class="card-title">{{ product.name }}</h5>
                        <p class="card-text">{{ product.description|truncatewords:20 }}</p>
                        <p class="card-text">
                            <strong>价格：</strong> ¥{{ product.price }}
                        </p>
                    </div>
                    <div class="card-footer">
                        <a href="{% url 'products:product_detail' product.pk %}" class="btn btn-primary">查看详情</a>
                    </div>
                </div>
            </div>
        {% empty %}
            <div class="col-12">
                <div class="alert alert-info">
                    暂无商品信息
                </div>
            </div>
        {% endfor %}
    </div>

    <!-- 关于我们 -->
    <div class="row mt-5">
        <div class="col-md-12">
            <h2 class="text-center mb-4">关于我们</h2>
            <p class="text-center">
                我们是一家专业的花店，提供各种新鲜花卉和精美花艺设计。
                无论是日常装饰、节日庆典还是特殊场合，我们都能为您提供最适合的花艺服务。
            </p>
        </div>
    </div>
</div>

<style>
    /* 欢迎横幅样式 */
    .welcome-banner {
        background-image: url("{% static 'images/banner.jpg' %}");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 3rem;
        position: relative;
        margin-bottom: 2rem;
    }

    /* 添加暗色遮罩，使文字更清晰 */
    .welcome-banner::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 0.3rem;
    }

    /* 确保文字在遮罩层之上 */
    .welcome-banner .container-fluid {
        position: relative;
        z-index: 1;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        .welcome-banner {
            padding: 2rem;
        }
        .welcome-banner h1 {
            font-size: 2rem;
        }
        .welcome-banner p {
            font-size: 1.1rem;
        }
    }
</style>
{% endblock %} 